<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
	<h:form id="form">

		<p:panel id="panel" header="New Person">

			<p:messages id="msgs" />

			<h:panelGrid columns="3" style="width: 278px; ">
				<h:outputLabel for="firstname" value="Firstname: *" />
				<p:inputText id="firstname" value="#{personBean.firstname}" required="true" label="Firstname">
					<f:validateLength minimum="2" />
				</p:inputText>
				<p:outputLabel></p:outputLabel>
				<p:outputLabel></p:outputLabel>
				<h:outputLabel for="surname" value="Surname: *" />
				<f:validateLength minimum="2" />
				<p:message for="firstname" display="icon" />


				<p:inputText id="surname" value="#{personBean.surname}" label="Surname" required="true">

					<p:ajax update="msgSurname" event="keyup" />
				</p:inputText>
				<p:message for="surname" id="msgSurname" display="icon" />

			</h:panelGrid>

			<p:commandButton id="btn" value="Save" update="panel" actionListener="#{personBean.savePerson}" />
		</p:panel>

	</h:form>
</ui:composition>